<!DOCTYPE html>
<html>

	<head>
		<!--防乱编码-->
		<meta charset="UTF-8">
		<!--优先使用IE最新版本和Chrome-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chome=1" />
		<!--视口--设备宽度--初始缩放比例--最小缩放比例--最大缩放比例--用户缩放-->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--禁止浏览器自动的识别-电话号码-email--->
		<meta name="format-detection" content="telephone=no,email=no" />
		<!--是否启用Web全屏-->
		<meta name="apple-mobile-web-app-capable" content='yes' />
		<meta name="apple-mobile-web-status-bar-style" content="normal|black|black-translucent">
		<!--设置苹果工具栏颜色-->
		<meta name="apple-mobile-web-app-status-bar-style" content='black' />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/password.css" />
		<link rel="stylesheet" type="text/css" href="../font-awesome/css/font-awesome.css" />
	</head>

	<body>
		<ul class="password">
			<li>
				<a href="../index.html"><span class="fa fa-angle-left"></span></a>
				<p>忘记秘密</p>
				<span></span>
			</li>
			<li>
				请输入您绑定的手机号码
			</li>
			<li>
				<p><img src="../img/phonecolour.png" /></p>
				<input type="text" name="" id="tel" value="" placeholder="手机号码" />
				<p><img src="../img/x.png" /></p>
				<!--<p id="count">30</p>-->
			</li>
			<li>
				<div id="content">
					<a href="Received.html" class="add" id="next">下一步</a>
				</div>
			</li>
		</ul>
		<div id="con">
			<div id="box">
				<h3>确认手机号码</h3>
				<p style="margin-top: 8px;">我们将发送验证码到:</p>
				<p></p>
				<button id="cancel">取消</button><button><a href="../html/Received.html" id="btn">确认</a></button>
			</div>
		</div>
	</body>
	<script src="../js/jquery-1.7.2.js"></script>
	<script src="../js/rem1.js"></script>
	<script type="text/javascript">
		$(function() {

			//			$('#content').click(function() {
			//				$('#con').fadeToggle(); //点击添加按钮让遮罩显示
			//			})
			$('#cancel').click(function() {
				$('#con').fadeToggle();
				
			})
			//手机验证
			$("#next").click(() => {
				let reg = /^1(3|4|5|7|8)\d{9}$/;
				if(reg.test($("#tel").val()) == true) {
					console.log($("#tel").val());
					$('#con').fadeToggle();
					$("#box p").eq(1).html($("#tel").val())
				} else {
					alert("手机格式错误")
				}
			})
			$("#btn").click(function() {
				$.ajax({
					type: "post",
					url: "http://127.0.0.1:1000",
					data: {
						name: "大道云航",
						tel: $("#tel").val()
					},
					success(data) {
//						console.log( typeof data)
						sessionStorage.setItem("code",data)
						
					},
					error(err) {
						console.log("err:" + err)
					}
				})

			})

		})
	</script>

</html>